<template>
  <div class="search-input">
    <input
      type="text"
      :placeholder="placeholder"
      :value="modelValue"
      @input="inpChange"
      @keydown.enter="search"
    />
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
export default {
  props: {
    placeholder: String,
    modelValue: String,
  },
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({});
    const inpChange = (e) => {
      ctx.emit("update:modelValue", e.target.value);
      //   e.target.value 就是当前input框输入的东西
    };

    const search = () => {
      ctx.emit("search");
    };
    //在子组件按下回车调用的是父组件的回车事件
    return { ...toRefs(data), inpChange, search };
  },
};
</script>

<style lang="scss">
.search-input {
  height: 37px;
  border-bottom: 1px solid #f3f3f3;
  display: flex;
  align-items: center;
  padding-left: 20px;
  box-sizing: border-box;
  input {
    width: 264px;
    height: 25px;
    border-radius: 12px;
    border: none;
    background: #f5f5f5;
    padding-left: 10px;
    box-sizing: border-box;
    font-size: 14px;
  }
}
</style>
